<!--
 * @Author: 王灿
 * @Date: 2019-11-03 00:40:05
 * @LastEditTime: 2019-12-07 00:03:53
 * @Description: 用户管理
 * @FilePath: \scarlet-sparrow-admin\src\views\home\home-user\index
-->

<template>
  <div class="public">
    <!-- 用户列表 -->
    <jq-title :title="title" @addTableRow="onTableRow" />
    <!-- table -->
    <happy-scroll color="rgba(0,0,0,0.5)" size="5">
      <el-table :data="tableData" style="width: 100%" class="public-table">
        <el-table-column prop="createAt" label="日期">
          <template slot-scope="scope">
            <span>{{ scope.row.createAt }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="realName" label="姓名" />
        <el-table-column prop="mobile" label="手机号" />
        <el-table-column label="账号状态">
          <template slot-scope="scope">
            <span class="public-table__status" :class="[scope.row.status === 1 ? 'active' : '']"></span>
            <span>{{ scope.row.status === 1 ? '正常' : '禁用' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注">
          <template slot-scope="scope">
            <span>{{ scope.row.remark || '--' }}</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="onEdit(scope.row)">编辑</el-button>
            <el-button
              type="text"
              size="small"
              :class="scope.row.status === 1 ? 'active' : ''"
              @click="onChangeStatus(scope.row)"
            >{{ scope.row.status === 1 ? '禁用' : '启用' }}</el-button>
          </template>
        </el-table-column>
      </el-table>
    </happy-scroll>
    <!-- 分页 -->
    <jq-page :total="total" :pageNum="pageNum" @changePageNum="changePageNum" />
    <!-- 新增/编辑 -->
    <el-dialog :title="tabTitle" :visible.sync="isShow" :close-on-click-modal="false" width="600px">
      <user-operate @addTableRow="onTableRow" :row="tabRow" />
    </el-dialog>
  </div>
</template>

<script>
import JqTitle from '@/components/jq-title/index.vue'
import JqPage from '@/components/jq-page/index.vue'
import UserOperate from './user-operate/index.vue'
import { getUserList, editUserStatus } from '@/api/home.js'
export default {
  name: 'HomeUser',
  components: { JqTitle, JqPage, UserOperate },
  data() {
    return {
      title: { label: '用户管理', flag: true, searchFlag: false },
      pageSize: 10,
      pageNum: 1,
      tableData: [],
      isShow: false,
      tabTitle: '新增',
      tabRow: {},
      total: 0,
      isRefresh: false
    }
  },
  created() {
    this.onGetUserList()
  },
  watch: {
    // 监听页码变化
    pageNum() {
      this.onGetUserList()
    },
    // 监听条数变化
    pageSize() {
      this.onGetUserList()
    },
    // 监听新增/ 编辑
    isRefresh() {
      if (this.isRefresh) {
        this.onGetUserList()
      }
    }
  },
  methods: {
    // 父子组件通讯
    onTableRow(data) {
      this.isShow = data.isShow
      this.isRefresh = data.isRefresh ? data.isRefresh : false
      this.tabTitle = '新增'
      this.tabRow = {}
    },
    // 页码变化
    changePageNum(data) {
      this.pageNum = data.pageNum
      this.pageSize = data.pageSize
    },
    // 用户数据列表
    onGetUserList() {
      getUserList({
        realName: '',
        mobile: '',
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then(res => {
        this.tableData = res.data.list
        this.total = res.data.totalRow
      })
    },
    // 编辑
    onEdit(row) {
      this.tabRow = row
      this.isRefresh = false
      this.isShow = true
      this.tabTitle = '编辑'
    },
    // 启用 / 禁用
    onChangeStatus(row) {
      let title = row.status === 1 ? "禁用" : "启用"
      this.$confirm('此操作将'+ title +'该账号，是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
           let form = new FormData()
          form.append('userId', row.id) 
          editUserStatus(form).then(res => {
            this.$message({
              type: 'success',
              message: res.msg
            })
            this.onGetUserList()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    }
  }
}
</script>

<style lang="scss">
.public {
  height: 100%;
  @include column;
  .public-table {
    height: 100%;
    .public-table__status {
      &.active {
        background: #96b327;
      }
    }
    thead {
      line-height: 35px !important;
      th {
        padding: 0 !important;
        background-color: #f5f5f5 !important;
      }
    }
    tbody {
      td {
        padding: 0 !important;
        height: 40px;
        line-height: 40px;
      }
    }
  }
}
</style>